<template>
  <div class="topBox">
    <el-image class="logo" :src="url"></el-image>
    <div class="acount">
      <el-image class="heaed" :src="headurl"></el-image>
      <el-dropdown @command="dropOut">
        <span class="el-dropdown-link">
          <span class="admin"
            >{{ name }} <i class="el-icon-caret-bottom el-icon-caret-top"></i
          ></span>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- </span> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: require("@/assets/logo.png"),
      headurl: require("@/assets/users.jpg"),
      name: ''
    };
  }
  , mounted() {
    this.name = window.sessionStorage.getItem('name')
  },
  methods: {
    dropOut() {
      this.$router.push('/login')
      this.$http.get(`http://127.0.0.1:8080/userprofile-platform/api/user/logout`)
    }
  }
};

</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.topBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.logo img {
  width: 80%;
}
.acount {
  color: #606266;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.acount .el-image{    width: 32px; padding: 0 10px}
.heaed {
  display: flex;
}
.admin {
  color: #606266;
  border-bottom: 1px solid #b8babf;
  padding-bottom: 5px
}
.el-divider--vertical {
  height: 1.5em;
  background-color: #b2aeae;
}
</style>
